<template>
  <view class="pagebox">
    <div class="h_name">
      <img src="static/s9.png" />
      <p class="rpx32 col282">店铺编号:{{shopId}}</p>
    </div>
    <div class="h_shop_it_box">
      <div @click="show(index)" class="h_shop_it" v-for="(item,index) in question" :key="item.id">
        <div class="h_shop_name">
          <p class="rpx28 col666">第{{item.index}}部分</p>
          <img class="hs_n" src="static/s7.png" />
        </div>
        <p class="rpx28 col999 omit1">{{item.name}}</p>
        <div class="xuxian">
          <div class="xuxian_it"></div>
          <div class="xuxian_it"></div>
        </div>
        <div class="progress">
          <p class="rpx24 col666">完成度</p>
          <div class="progingbox">
            <div class="proging" :style="{'width': item.progress}">
              <div class="proging_tt" v-for="itn in parseInt(90/4)" :key="itn"></div>
            </div>
          </div>
          <p class="pg_bi rpx24 app_col">{{item.progress}}</p>
        </div>
      </div>
      <!-- <div class="h_shop_it" v-for="it in 1">
			<div class="h_shop_name">
				<p class="rpx28 col666">第一部分</p>
				<img class="hs_n no_st" src="static/s7_1.png" />
			</div>
			<p class="rpx28 col999 omit1">产品铺货 & 产品价格 & 主货架陈列面数产品铺货 & 产品价格 & 主货架陈列面数</p>			
			<div class="progress">
				<p class="rpx24 col666">完成度</p>
				<div class="progingbox">
					
				</div>
				<p class="pg_bi rpx24 cole3e">0%</p>
			</div>
      </div>-->
    </div>

    <navigator class="but88 rpx32 colfff app_bg">样本上传</navigator>
  </view>
</template>

<script>
import mixins from "@/mixins";
import ntfy from "../../components/ntfy/index.vue";
import { mapMutations } from "vuex"
export default {
  // mixins: [mixins],
  components: { ntfy },
  data() {
    return {
      title: "title",
      shopId: "",
      catId: "",
      question: [
        {
          index: "一",
          name: "产品铺货 & 产品价格 & 主货架陈列面数",
          progress:'0%'
        },
        {
          index: "四",
          name: "冰柜",
          progress:'0%'
        },
        {
          index: "五",
          name: "冷风柜",
          progress:'0%'
        },
        {
          index: "六",
          name: "二次陈列",
          progress:'0%'
        }
      ]
    };
  },
  onBackPress(options) {
    mixins.navigate("./shop_info?shopId="+this.shopId);
    return true
  },
  onLoad(e) {
    let _that = this
    _that.shopId = e.shopId;
    // this.setStoreId(e.shop_id)
    // this.setCatId(e.cat_id)
    _that.catId = e.catId;
    // uni.getStorage({
    //   key: "question",
    //   success: res => {
		// if(res.data[7].progress){
		// 	this.question[1].progress = res.data[7].progress
		// }
    //     this.question[2].progress = this.computerProgress1(res.data)/4*100+"%"
    //     this.question[3].progress = this.computerProgress2(res.data)/8*100+"%"
           
    //   }
    // });
    uni.getStorage({
      key:"shopId-"+_that.shopId,
      success:res=>{
        //计算进度条
        if(res.data.q1){
          _that.question[0].progress = (_that.computerProgress3(res.data)/6).toFixed(2)*100+"%"
        }
        if(res.data.q8){
          let length = res.data.q8.length;
          //计算完成个数
          let num = 3*length;
          for(let i=0;i<length;i++){
            if(res.data.q8[i][3].text!=""){
              num++
            }
            if(res.data.q8[i][4].text!=""){
              num++
            }
          }
          _that.question[1].progress = (num/(length*5)).toFixed(2)*100+"%"
        }
        if(res.data.sel[13].sel_data){
          let length = res.data.sel[13].sel_data.length;
          let num = 4*length;
          _that.question[2].progress = (_that.computerProgress1(res.data)/num).toFixed(2)*100+"%"
          
        }
        if(res.data.sel[18].sel_data){
          let length1 = res.data.sel[18].sel_data.length;
          let num1 = 8*length1;
          _that.question[3].progress = (_that.computerProgress2(res.data)/num1).toFixed(2)*100+"%"
        }
      }
    })
  },
  methods: {
    complete(length){
      let num = 3*length;
      for(let i=0;i<length;i++){

      }
      if(this.question[7].collapse[3].text!=""){
        num ++
      }
      if(this.question[7].collapse[4].text!=""){
        num++
      }
      return num
    },
    // ...mapMutations(['setStoreId']),
    // ...mapMutations(['setCatId']),
    computerProgress3(data){
      let num = 1
      let flag1 = true
      data.q1.forEach(element=>{
        element.forEach(ele=>{
          if(ele.num && flag1){
            flag1 = false
            num++
            return;
          }
        })
      })
      let flag2 = true
      data.q1.forEach(element=>{
        element.forEach(ele=>{
          if(ele.q3value && flag2){
            flag2 = false
            num++
            return;
          }
        })
      })
      let flag3 = true
      data.q1.forEach(element=>{
        element.forEach(ele=>{
          if(ele.price && flag3){
            flag3 = false
            num++
            return;
          }
        })
      })
      if(data.q3_1){
        num++
      }
      if(data.q5){
        num++
      }
      return num
    },
    hasNum(data){
      let b = false
      data.forEach((ele)=>{
        ele.forEach((e)=>{
          if(e.num&&e.num!=""){
            b = true
          }
        })
      })
      return b
    },
    hasPrice(data){
      let b = false
      data.forEach((ele)=>{
        ele.forEach((e)=>{
          if(e.price&&e.price!=""){
            b = true
          }
        })
      })
      return b
    },
    computerProgress1(data){
      let num = data.sel[13].sel_data.length;
      data.sel[14].sel_data.forEach(element=>{
          if(element.value!=""){
            num++
          }
      })
      data.sel[15].sel_data.forEach(element=>{
          if(element.value!=""){
            num++
          }
      })
      data.sel[16].sel_data.forEach(element=>{
        element.item.forEach(ele=>{
          if(ele.value!=""){
            num++
            return;
          }
        })
      })
      return num
    },
    computerProgress2(data){
      let num = data.sel[18].sel_data.length;
      data.sel[19].sel_data.forEach(element=>{
          if(element.item!=""){
            num++
          }
      })
      data.sel[20].sel_data.forEach(element=>{
          if(element.value&&element.value!=""){
            num++
          }
      })
      data.sel[21].sel_data.forEach(element=>{
          if(element.value&&element.value!=""){
            num++
          }
      })
      data.sel[23].sel_data.forEach(element=>{
          num++
      })
      data.sel[24].sel_data.forEach(element=>{
        element.forEach(ele=>{
          if(ele.val!=""){
            num++
            return;
          }
        })
      })
      data.sel[25].sel_data.forEach(element=>{
        element.forEach(ele=>{
          if(ele.val!=""){
            num++
            return;
          }
        })
      })
      data.sel[26].sel_data.forEach(element=>{
          if(element.value!=""){
            num++
            return;
          }
      })
      // if(data[18].sel_data){
      //   num++
      // }
      // if(data[19].sel_data&&data[19].sel_data.item!=[]){
        
      //   num++
      // }
      // if(data[20].sel_data){
      //   num++
      // }
      // if(data[21].sel_data){
      //   num++
      // }
      // if(data[23].sel_data){
      //   num++
      // }
      // if(data[26].value&&data[26].value!=2||this.judge(data[26].item)){
      //   num++
      // }
      // if(this.judge1(data[24].item)){
      //   num++
      // }
      // if(this.judge1(data[25].item)){
      //   num++
      // }
      return num
    },
    judge(data){
      let b = false
      data.forEach(element => {
        if(element.value&&element.value!=2){
          b = true
        }
      });
      return b
    },
    judge1(data){
      let b = false
      data.forEach(element => {
        if(element.val&&element.val!=""){
          b = true
        }
      });
      return b
    },
    show(index) {
      if (index == 0) {
        mixins.navigate("../q1/q1?shopId="+this.shopId+"&catId="+this.catId);
      } else if (index == 1) {
        mixins.navigate("../q2/q8?shopId="+this.shopId+"&catId="+this.catId);
      } else if (index == 2) {
        mixins.navigate("../sel/sel?shopId="+this.shopId+"&catId="+this.catId+"&select=0");
      } else {
        mixins.navigate("../sel/sel?index=4&shopId="+this.shopId+"&catId="+this.catId+"&select=0");
      }
    }
  }
};
</script>

<style scoped>
.h_name {
  display: flex;
  align-items: center;
  margin: 45upx 30upx 32upx;
}
.h_name img {
  display: block;
  width: 40upx;
  height: 40upx;
  margin-right: 13upx;
}

/* .h_shop_it_box{padding: 25upx 0;} */
.h_shop_it {
  position: relative;
  height: 286upx;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(220, 220, 220, 1);
  border-radius: 8upx;
  margin: 0 24upx 20upx;
}
.h_shop_it .hs_but {
  position: absolute;
  right: 0;
  top: 50upx;
  width: 150upx;
  text-align: center;
  height: 60upx;
  line-height: 60upx;
  background: rgba(251, 0, 26, 1);
  border-radius: 8upx;
}
.h_shop_it > p {
  height: 30upx;
  line-height: 30upx;
  padding: 0 34upx 0 44upx;
}
.h_shop_name {
  margin: 38upx 0 20upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34upx 0 44upx;
}
.h_shop_name > p {
  max-width: 500upx;
}
.h_shop_name .hs_n {
  width: 40upx;
  height: 40upx;
}
.hs_more {
  margin: 0 8upx;
  height: 80upx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e5e5;
}

/* .h_shop_it:before{content: '';display: block;width: 24upx;height: 24upx;border-radius: 50%;background: red;} */
.xuxian {
  position: relative;
  margin: 42upx 60upx 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.xuxian_it {
  position: relative;
  border-top: 2upx dashed #dcdcdc;
  width: 50%;
  height: 0;
}
.xuxian_it:first-child:after {
  content: "";
  position: absolute;
  left: -84upx;
  top: -14upx;
  display: block;
  width: 24upx;
  height: 24upx;
  background: #f7f7f7;
}
.xuxian_it:first-child:before {
  content: "";
  position: absolute;
  left: -72upx;
  top: -14upx;
  background: #f7f7f7;
  box-sizing: border-box;
  display: block;
  width: 24upx;
  height: 24upx;
  border: 1px solid rgba(220, 220, 220, 1);
  border-radius: 50%;
}
.xuxian_it:last-child:after {
  content: "";
  position: absolute;
  right: -84upx;
  top: -14upx;
  display: block;
  width: 24upx;
  height: 24upx;
  background: #f7f7f7;
}
.xuxian_it:last-child:before {
  content: "";
  position: absolute;
  right: -72upx;
  top: -14upx;
  background: #f7f7f7;
  box-sizing: border-box;
  display: block;
  width: 24upx;
  height: 24upx;
  border: 1px solid rgba(220, 220, 220, 1);
  border-radius: 50%;
}

.progress {
  position: absolute;
  bottom: 44upx;
  margin: 0 24upx 0 34upx;
  width: 644upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.progingbox {
  overflow: hidden;
  width: 466upx;
  height: 24upx;
  background: rgba(227, 227, 227, 1);
  border-radius: 12upx;
}
.proging {
  display: flex;
  align-items: center;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(247, 137, 54, 1),
    rgba(251, 0, 26, 1)
  );
  border-radius: 12upx;
}
.pg_bi {
  width: 64upx;
}
.proging_tt {
  margin-left: 10upx;
  height: 20upx;
  width: 10upx;
  background: rgba(255, 255, 255, 0.3);
  transform: skew(-20deg);
}
.proging_tt:first-child {
  margin-left: 12upx;
}
.proging_tt:last-child {
  margin-right: 12upx;
}

.but88 {
  margin-top: 92upx;
}
</style>
